<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <eHeader :permission="permission" />
      <crudOperation :permission="permission" :async="true">
        <el-button slot="end-left" class="filter-item" size="mini" type="danger" @click="goBack" >
          <i class="el-icon-arrow-left"></i>返回企业风采
        </el-button>
      </crudOperation>
    </div>
    <el-row v-if="showEditSummary" :gutter="24" style="margin: 10px">
      <el-col :span="20">
        <span v-if="edit==false" style="font-size: 20px">{{ summary }}</span>
        <span v-if="edit==true">
          <el-input type="textarea"
            :autosize="{ minRows: 2, maxRows: 4}"
            placeholder="请输入内容"
            v-model="summary">
          </el-input>
        </span>
      </el-col>
      <el-col :span="4">
        <el-button v-if="edit==false" type="primary" size="mini" icon="el-icon-edit" @click="editSummary">编辑</el-button>
        <el-button v-if="edit==true" type="success" size="mini" icon="el-icon-check" @click="saveSummary">保存</el-button>
      </el-col>
    </el-row>
    <p v-else style="margin: 10px; padding-left: 12px; padding-right: 12px; font-size: 20px">{{ summary }}</p>
    <!--表格渲染-->
    <el-table ref="table" v-loading="crud.loading" border :data="getFormattedData(crud.data)" style="width: 100%;" @selection-change="crud.selectionChangeHandler">
      <!-- <el-table-column type="selection" width="55" /> -->
      <el-table-column label="序号" width="50px" align="center" :resizable="false">
        <template slot-scope="scope">
          {{ scope.$index+(crud.currentPage - 1) * crud.pageLimit + 1 }}
        </template>
      </el-table-column>
      <el-table-column prop="enterpriseName" label="产值超亿元重点企业" :resizable="false" />
      <el-table-column v-for="key in allKeys" :key="key" :prop="key" :label="`${key}年产值（万元）`" :resizable="false"/>
      <!--   编辑与删除   -->
      <el-table-column
        label="操作"
        width="250px"
        align="center"
        fixed="right"
        :resizable="false"
      >
        <template slot-scope="scope">
          <udOperation
            :data="scope.row"
            :permission="permission"
            async
          >
            <el-button slot="left" class="option-item" size="mini" type="primary" plain icon="el-icon-view"  title="查看"  @click="doView(scope.row.enterpriseName)" />
          </udOperation>
        </template>
      </el-table-column>
    </el-table>
    <!--分页组件-->
    <pagination />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import crudKey from '@/api/business/enterprise/key'
import eHeader from './module/header'
import CRUD, { presenter } from '@crud/crud'
import crudOperation from '@crud/CRUD.operation'
import pagination from '@crud/Pagination'
import udOperation from '@crud/UD.operation'
import enterprise from '@/api/business/enterprise.js'
import { buildMenus } from '@/api/sys/menu'
const addPageUrl = '/business/enterprise/key/add';
const editPageUrl = '/business/enterprise/key/edit';
export default {
  name: 'KeyEnterpriseList',

  components: { eHeader, crudOperation, pagination, udOperation },
  cruds() {
    return CRUD({
      title: '产值超亿元重点企业',
      url: 'business/enterprise/czcyy/queryPage',
      crudMethod: { ...crudKey },
      addPage: true,
      addPageUrl: addPageUrl,
      addParams: ['allKeysQuery'],
      editPage: true,
      editPageUrl: editPageUrl,
      editParams: ['enterpriseName'],
      optShow: {
        add: true,
        edit: false,
        del: false,
        reset:true
      },
      query: {
        status:0
      },
      idField: 'enterpriseName'
    })
  },

  mixins: [presenter()],
  // 数据字典

  data() {
    return {
      allKeys: [],
      allKeysQuery: null,
      permission: {
        add: [],
        edit: [],
        del: [],
        info: []
      },
      enterpriseName: null,
      dialogFormVisible: false,
      summary: '',
      edit: false,
      years: [],
      showEditSummary: false
    }
  },

  created() {
    console.log(this.crud, this.permission, 'permission')
    this.getSummary('czcyy')
    this.isShowEditSummary()
  },
  methods: {
    doView(enterpriseName) {
      console.log(enterpriseName, 'enterpriseName')
      this.$router.push({
        path: '/business/enterprise/key/detail',
        query: { enterpriseName, }
      })
    },
    addPlan() {
      this.$router.push('/business/enterprise/key/add')
    },
    onChangeStatus (record) {
      console.log('record : ', record)
    },
    getFormattedData(data) {
      if (!data) {
        return [];
      }
      const formattedData = data.map(item => {
        // const obj = { enterpriseName: item.enterpriseName };
        const obj = item
        const keyValuePairs = item.outputValues.split(';');
        keyValuePairs.forEach(pair => {
          const [key, value] = pair.split(':');
          obj[key] = value;
          if (!this.allKeys.includes(key)) {
            this.allKeys.push(key);
          }
        });
        return obj;
      });
      localStorage.setItem('years', JSON.stringify(this.allKeys));
      return formattedData;
    },
    getSummary(category){
      enterprise.getSummary(category).then(res => {
        this.summary = res.data.headText
      })
    },
    editSummary(){
      this.edit = true
    },
    saveSummary(){
      this.edit = false

    },
    goBack(){
      this.$router.push('/business/newEnterprise/')
    },
    isShowEditSummary(){
      buildMenus().then(res => {
        const menuList = JSON.parse(JSON.stringify(res.data.menuList))
        const menu = menuList.some(menu => menu.name === "企业管理目录")
        if (menu){
          this.showEditSummary = true;
        }
        else{
          this.showEditSummary = false;
        }
      })
    }
  },
  computed: {
    ...mapGetters([
      'user'
    ])
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
 ::v-deep .el-input-number .el-input__inner {
    text-align: left;
  }
 ::v-deep .svg-icon {
   vertical-align: middle;
 }
 /* Tooltip 文本 */
 .tooltip .tooltiptext {
   visibility: hidden;
   width: 40px;
   background-color: #666;
   color: #fff;
   text-align: center;
   padding: 5px 0;
   border-radius: 6px;

   /* 定位 */
   position: absolute;
   z-index: 1;
   right: 28px;
   top: 0;
 }

 /* 鼠标移动上去后显示提示框 */
 .tooltip:hover .tooltiptext {
   visibility: visible;
 }
</style>

<style>
 .el-table th.el-table__cell > .cell{
  text-align: center;
  color: black
 }
</style>
